// 提供项目需要的工具函数，可以复用的逻辑封装这里

import { ref } from "vue";
import { useIntersectionObserver } from "@vueuse/core";

/**
 * 数据懒加载函数
 * @param {function} apiFn 调用接口的函数
 */
export const useLazyData = (apiFn) => {
  const target = ref(null);
  const list = ref([]);
  const { stop } = useIntersectionObserver(
    // 被观察的元素或组件
    target,
    async ([{ isIntersecting }]) => {
      // 是否进入可视区
      // 如果在这里发请求，isIntersecting 值为真
      if (isIntersecting) {
        stop();
        const data = await apiFn();
        list.value = data.result;
        // 如果第一次进入，发请求。停止观察
      }
    }
  );
  // 提供给模板使用
  return { target, list };
};